import React, { useEffect, useState } from 'react';
import ChartsLine from '../components/Echarts/ChartsLine';
import './index.less';
/*
历史数据组件


 */
export default function index(props: any) {
  const { data } = props;
  const [allEcharts, setAllEcharts] = useState<any>({});
  useEffect(() => {
    let keyArray = Object.keys(data[0])
      ?.map((val) => val)
      ?.slice(2);
    let echartsData: any = {};
    /*
数组的双层循环，让每一列都有一个表头对应的对象
     */
    keyArray.forEach((val) => {
      // 让每一列都有一个表头对应的对象
      echartsData[val] = {
        xData: [],
        yData: [],
      };
      data.forEach((item: any) => {
        // 让每一个表头对象都有时间和表头对应的数据
        echartsData[val]['xData'].push(item.date);
        echartsData[val]['yData'].push(Number(item[val]).toFixed(2));
      });
    });
    setAllEcharts(echartsData);
  }, [data]);
  // 重新定义历史数据图标名称
  const obj = {
    RotatSpeedCutter: '1',
    // RotatSpeedCutter: '1',
  };
  return (
    <div className="history-data">
      {/*Object.keys(allEcharts)：将对象的key转成数组  */}
      {Object.keys(allEcharts).map((val: string) => {
        return (
          <div className="data-echarts" key={val}>
            <ChartsLine
              xData={allEcharts[val]['xData']}
              yData={allEcharts[val]['yData']}
              title={obj[val] ? obj[val] : val}
            />
          </div>
        );
      })}

      {/* <div className="history-data-top">
        <div className="data-top-left">
          <ChartsLine></ChartsLine>
        </div>
        <div className="data-top-right">
          <ChartsLine></ChartsLine>
        </div>
      </div>
      <div className="history-data-bottom">
        <div className="data-bottom-left">
          <ChartsLine></ChartsLine>
        </div>
        <div className="data-bottom-right">
          <ChartsLine></ChartsLine>
        </div>
      </div> */}
    </div>
  );
}
